<%
    String path = request.getContextPath();
    int port=request.getServerPort();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    if(port==80){
        basePath = request.getScheme()+"://"+request.getServerName()+path+"/";
    }
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>${act.pagetitle}</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telphone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <jsp:include page="../comm/comm.jsp"/>
    <script src="<%=basePath%>/myjs/ckplayer.js"></script>
    <style type="text/css">
        body { min-width:320px;background:#fff; font:normal 18px/1.5 helvetica, 微软雅黑, verdana, san-serif;color:#333;}
        *{margin: 0;padding: 0;}
        .header {
            height: 45px;
            width: 100%;
            background-color: #f1130e;
            position: relative;
            line-height: 45px;
            text-align: center;
            color: white;
            font-size: 18px;
            letter-spacing: 2px
        }
        .fanhui{
            width: 17%;
            height: 100%;
            background: url(/images/fanhui.png) no-repeat;
            background-size: 55% 76%;
            background-position-y: 5px;
            float: left;
        }
        .header_js{
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        .js_left{
            width: 122px;
            height: 176px;
            background-size: 100% 100%;
            float: left;
            margin: 20px 5px 0px 6px;
        }
        .js_right{
            float: right;
            width: 223px;
            height: 212px;
            margin-right: 3px;
        }
        .r_c_bh{
            float: right;
        }
        .r_c_dz{
            display: inline-block;
            width: 108px;
            height: 32px;
            border: 1px solid red;
            margin-top: 1px;
            border-radius: 4px;
        }
        .r_c_dz_icon{
            display: inline-block;
            width: 23px;
            height: 23px;
            background-image: url(/images/kongxin.png);
            background-size: 100%;
            margin: 5px;
        }
        .r_c_dz_jilu{
            float: right;
            margin-top: 5px;
            margin-right: 7px;
            color: #f1130e;
            font-size: 15px;
        }
        i {
            font-style: normal;
        }
        .r_c_name{
            display: inline-block;
            width: 80px;
            font-size: 15px;
        }
        .photo{
            margin-top: 10px;
        }
        .r_bt{
            color: #29599d;
            font-size: 15px;
            padding-left: 10px;
        }
        .my_p{
            width: 98%;
            margin-left: 6px;
            margin-top: 5px;
        }
        .p_left{
            float: left;
            width: 50%;
            height: 100%;
        }
        .p_right{
            float: right;
            width: 50%;
            height: 190px;

            background-size: 100% 100%;
        }
        .p_left1{
            display: inline-block;
            width: 48%;
            height: 60%;
            background-image: url(/images/p_1.png);
            background-size: 100% 100%;
        }
        .p_left2{
            display: inline-block;
            width: 49%;
            height: 60%;
            background-image: url(/images/p_2.png);
            background-size: 100% 100%;
        }
        .p_left3{
            display: inline-block;
            width: 100%;
            height: 36%;
            background-image: url(/images/p_3.png);
            background-size: 100% 100%;
        }
        .my_v{
            width: 98%;

            margin-left: 6px;
            margin-top: 5px;
        }
        .v_left{
            float: left;
            width: 45%;
            height: 100%;
            background-size: 100% 100%;
            margin-left: 5px;
        }
        .v_right{
            float: right;
            width: 45%;
            height: 100%;

            background-size: 100% 100%;
            margin-right: 10px;
        }
        .r_icon_active{
            background-image: url(/images/xin.png);
        }
    </style>
</head>
<body style="background-image: url(/images/bj2.png);background-size: 100%;">
<div class="header">
    <div class="fanhui" onclick="javascript:history.back(-1);"></div>
    <div id="" style="width: 80%;">${act.title}</div>
</div>

<div class="header_js">
    <div class="js_left">
        <img src="/upload/${data.headimg}" width="122px" height="176px">
    </div>
    <div class="js_right">
        <p style="margin-top: 14px;">
            <span class="r_c_name"><i>${data.name}</i> <i>${data.code}</i></span>
            <span class="r_c_bh r_c_dz" id="${data.id}">
						 <c:if test="${data.openid==null}">
                             <span class="r_c_dz_icon"></span>
                             <span class="r_c_dz_jilu"><i class="leijia" style="font-size: 12px;color: #666666;">${data.num}</i> <i class="dz_jilu">点赞</i></span>
                         </c:if>
                        <c:if test="${data.openid!=null}">
                            <span class="r_c_dz_icon r_icon_active"></span>
                            <span class="r_c_dz_jilu"><i class="leijia" style="font-size: 12px;">${data.num}</i><i class="dz_jilu">已赞</i></span>
                        </c:if>
					</span>
        </p>
        <p style="color: #666666;font-size: 12px;margin-top: 3px;">
            ${data.content}
        </p>
    </div>
</div>

<div class="photo">
    <p class="r_bt">我的照片</p>
    <div class="my_p">
        <c:forEach items="${data.picList}" var="item" varStatus="i" >
        <c:if test="${i.index%2==0}">
        <div class="p_left"  style="margin-top: 10px">

            </c:if>

            <c:if test="${i.index%2==1}">

            <div class="p_right"  style="margin-top: 10px">

                </c:if>
                    <img src="/upload/${item}" width="95%" height="190px" >
            </div>
                <c:if test="${i.index%2==0&&i.last}">
                    <div class="p_right" style="margin-top: 10px"></div>
                </c:if>
            </c:forEach>
    </div>
</div>

<div class="video">
    <p class="r_bt" style="margin-top: 10px">我的视频</p>
    <div class="my_v">
        <c:forEach items="${data.videoDataList}" var="item" varStatus="i">
             <c:if test="${i.index%2==0}">
            <div class="v_left">
             </c:if>
            <c:if test="${i.index%2==1}">
                 <div class="v_right">
            </c:if>
                <%--<div id="${item}" style="width:100%;height:150%;" class="video"></div>--%>
                <video width="100%" height="100%" src="/upload/${item.video}" controls="controls" preload="metadata" poster="/upload/${item.thumb}">
                </video>
                <%--<script type="text/javascript">--%>
                    <%--var player=new ckplayer({--%>

                        <%--container: '#'+"${item}",//“#”代表容器的ID，“.”或“”代表容器的class--%>
                        <%--variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象--%>
                        <%--flashplayer:false,//如果强制使用flashplayer则设置成true--%>
                        <%--video:'/upload/'+"${item}"//视频地址--%>
                    <%--});--%>


                <%--</script>--%>
            </div>
        </c:forEach>

    </div>
</div>

</body>
</html>

<script type="text/javascript">
    var  activityId=config.getQueryString("activityId");
    $('.r_c_dz').click(function(){
        if( $(this).children('.r_c_dz_jilu').children('.dz_jilu').html()=="已赞"){
            alert("请勿重复点赞");
            return;
        }
        config.commPost("/tasks/dianzan.json",{taskId:$(this).attr("id"),activityId:activityId,type:"0"},function (data) {

        })
        $(this).children('.r_c_dz_jilu').children('.dz_jilu').html('已赞');
        var num = $(this).children('.r_c_dz_jilu').children('.leijia').text();
        num++;
        $(this).children('.r_c_dz_jilu').children('.leijia').text(num);
        $(this).children('.r_c_dz_jilu').children('.leijia').css('color','#f1130e');
        $(this).children('.r_c_dz_icon').addClass('r_icon_active');
    })


</script>